<template>
	<div class="coupon">
		<header>优惠券管理</header>
		<div class="contents">
			<div class="conditions">
				<div class="condition_1">
					<div class="market_type">
						<span>
							<label style="visibility:hidden;">这</label>类型：</span>
						<el-select v-model="value1" placeholder="请选择" style="width:300px;">
							<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</div>
					<div class="status">
						<span>状态：</span>
						<el-select v-model="value2" placeholder="请选择" style="width:300px;">
							<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</div>
					<el-button type="danger" style="background:#e7251a;" @click.native="goQuery">查询</el-button>
					<el-button @click.native="resets">重置</el-button>
				</div>
				<div class="condition_2">
					<div class="keywords">
						<span>关键字：</span>
						<el-input v-model.trim="input1" placeholder="请输入" style="width:300px;margin-left:4px;"></el-input>
					</div>
				</div>
				<div class="add_market">
					<el-button type="danger" style="background:#e7251a;" @click.native="goAdd">新增优惠券</el-button>
					<el-button type="danger" style="background:#e7251a;" @click.native="greatSend">批量分发</el-button>
					<el-button @click.native="goSendRecord">分发记录</el-button>
				</div>
				<div class="selected" v-if="selectArr.length>0">
					<p>
						<img src="../../assets/images/market/select2.png" alt="" />
						<span>已选择&nbsp;
							<label>{{selectArr.length}}</label>&nbsp;项</span>
					</p>
				</div>
				<div class="tables">
					<el-table v-loading="loading" :data="actList" style="width: 100%" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="50"> </el-table-column>
						<el-table-column prop="SUBJECT" label="优惠券名称" width="200"> </el-table-column>
						<el-table-column prop="CATEGORY" label="优惠券类型" width="200">
							<template slot-scope="scope">
								<span v-if="scope.row.CATEGORY==1">满减券</span>
								<span v-else-if="scope.row.CATEGORY==2">兑换券</span>
								<span v-else-if="scope.row.CATEGORY==3">服务券</span>
								<span v-else-if="scope.row.CATEGORY==4">N元券</span>
								<span v-else-if="scope.row.CATEGORY==5">折扣券</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="USERANGE" label="适用范围" width="230">
							<template slot-scope="scope">
								<span v-if="scope.row.USERANGE">{{scope.row.USERANGE}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="STARTDATE" label="开始时间" width="200">
							<template slot-scope="scope">
								<span v-if="scope.row.STARTDATE">{{ scope.row.STARTDATE | filterTimes}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="EXPDATE" label="结束时间" width="200">
							<template slot-scope="scope">
								<span v-if="scope.row.EXPDATE">{{ scope.row.EXPDATE | filterTimes}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="STATUS" label="状态" width="150">
							<template slot-scope="scope">
								<span v-if="scope.row.STATUS==1" style="display:flex;align-items:center;justify-content:center;">
									<img src="../../assets/images/market/dot_green.png" width="16" heigth="16" alt="" />有效 </span>
								<span v-else-if="scope.row.STATUS==0" style="display:flex;align-items:center;justify-content:center;">
									<img src="../../assets/images/market/dot_red.png" width="16" heigth="16" alt="" />失效 </span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="options" label="操作" width="200">
							<template slot-scope="scope">
								<span class="editStatus" @click="goSend(scope.row.CASHVOLUMERECORDID)">分发</span>
								<span class="edits" @click="edits(scope.row.CASHVOLUMERECORDID)">编辑</span>
								<span class="dels" @click="dels(scope.row.CASHVOLUMERECORDID)">删除</span>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page1" :page-sizes="[6, 8, 10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.COUNT"> </el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { asyncRouterMap } from '@/router/index'
	import { getCashVolumeRecordList } from '@/api/coupon'
	import { deleteCashVolumeRecord } from '@/api/coupon'
	import { setCookie, getCookie } from '@/assets/js/cookie'
	export default {
		name: 'coupon',
		data() {
			return {
				value1: '', //营销类型
				value2: '', //状态      
				input1: '', //关键字
				options1: [{
					value: 1,
					label: '满减劵'
				}, {
					value: 2,
					label: '兑换劵'
				}, {
					value: 3,
					label: '服务券'
				}, {
					value: 4,
					label: 'N元劵'
				}, {
					value: 5,
					label: '折扣劵'
				}],
				options2: [{
					value: 1,
					label: '有效'
				}, {
					value: 0,
					label: '失效'
				}],
				tableDatas: '', //数据对象      
				selectArr: [], //已选择的数组集合
				page1: 1, //当前页数
				pageSize1: 6, //每页多少条
				loading: true,
				arr_one: [],
                arr_two: [],
                str_one: '', //一级菜单字符串
                str_two: '', //二级菜单字符串
			}
		},
		computed: {
			//请求参数
			objs() {
				let obj = {};
				obj.PAGE_NO = this.page1; //页码
				obj.PAGE_SIZE = this.pageSize1; //每页多少条
				this.value1 ? obj.CATEGORY = this.value1 : null; //券类型
				if(this.value2 === 1 || this.value2 === 0) {
					obj.STATUS = this.value2; //状态(1、有效  0 、失效)
				}
				this.input1 ? obj.LIKESTR = this.input1 : null; //查询关键字
				return obj;
			},			
			//分页数据
			actList() {				
				if(this.tableDatas.CASHVOLUMERECORDARR) {
					return this.tableDatas.CASHVOLUMERECORDARR;
				}
			}
		},
		created() {
			/* ----------权限管理---------- */
            if(getCookie('name') !== 'admin') {
                let self = this;                
                this.$axiosPost('/4SCAFE/cafeUser/getMenuListByUserId.action', {
                    CAFEUSER_ID: getCookie('userId')
                }).then(res => {                    
                    if(res.STATUS_CODE === 1) {
                        //动态加载路由
                        res.MENU_DATA.forEach((v) => {
                            //一级菜单
                            self.arr_one.push(v.MENUID);
                            //二级菜单
                            v.MENUS.forEach((n) => {
                                self.arr_two.push(n.SECMENUNAME);
                            })
                        })
                    }
                    self.str_one = self.arr_one.join(',');
                    self.str_two = self.arr_two.join(',');                    
                    //--------------------------功能----------------------------
                    if(self.str_one.indexOf(2) === -1) {
                        this.$set(asyncRouterMap[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('营销管理') === -1) {
                        this.$set(asyncRouterMap[0].children[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('优惠券管理') !== -1) {
                    	console.log(0);
                        this.$set(asyncRouterMap[0].children[1], 'hidden', false);
                    }
                    if(self.arr_two.indexOf('广告位管理') === -1) {
                        this.$set(asyncRouterMap[0].children[2], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('积分商城管理') === -1) {
                        this.$set(asyncRouterMap[0].children[3], 'hidden', true);
                    }
                    //--------------------------功能----------------------------
                    //--------------------------管理----------------------------
                    if(self.str_one.indexOf(3) === -1) {
                        this.$set(asyncRouterMap[11], 'hidden', true);
                    }
                    if(self.str_two.indexOf('门店管理') === -1) {
                        this.$set(asyncRouterMap[11].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('商品管理') === -1) {
                        this.$set(asyncRouterMap[11].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('会员管理') === -1) {
                        this.$set(asyncRouterMap[11].children[2], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单管理') === -1) {
                        this.$set(asyncRouterMap[11].children[3], 'hidden', true);
                    }
                    if(self.str_two.indexOf('退款管理') === -1) {
                        this.$set(asyncRouterMap[11].children[4], 'hidden', true);
                    }
                    //--------------------------管理----------------------------
                    //--------------------------统计----------------------------
                    if(self.str_one.indexOf(4) === -1) {
                        this.$set(asyncRouterMap[19], 'hidden', true);
                    }
                    if(self.str_two.indexOf('用户分析') === -1) {
                        this.$set(asyncRouterMap[19].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单分析') === -1) {
                        this.$set(asyncRouterMap[19].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('储存卡分析') === -1) {
                        this.$set(asyncRouterMap[19].children[2], 'hidden', true);
                    }
                    //--------------------------统计----------------------------
                    //--------------------------设置----------------------------
                    if(self.str_one.indexOf(5) === -1) {
                        this.$set(asyncRouterMap[20], 'hidden', true);
                    }
                    if(self.str_two.indexOf('积分设置') === -1) {
                        this.$set(asyncRouterMap[20].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('账号设置') === -1) {
                        this.$set(asyncRouterMap[20].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('系统设置') === -1) {
                        this.$set(asyncRouterMap[20].children[2], 'hidden', true);
                    }
                    //--------------------------设置----------------------------                    
                })
            }
            /* ----------权限管理---------- */
			this.getList();
		},
		methods: {
			//优惠券列表
			getList(){
				this.loading = true;						
				this.$axiosPost('/4SCAFE/CashVolumeRecord/getCashVolumeRecordList.action', this.objs).then(res => {
					if(res.STATUS_CODE === 1) {
						this.loading = false;
						this.tableDatas = res;
					}
				})
			},
			handleSelectionChange(val) {
				this.selectArr = val;
				//console.log(this.selectArr);
			},
			handleSizeChange(val) {
				this.loading = true;
				this.pageSize1 = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.loading = true;
				this.page1 = val;
				this.getList();
			},
			//新增优惠券
			goAdd() {
				this.$router.push({
					path: '/functions/addCoupon'
				});
			},
			//分发
			goSend(id) {
				setCookie('ticketID', id, 1);
				this.$router.push({
					path: '/functions/sendCoupon'
				});
			},
			//批量分发
			greatSend() {
				if(this.selectArr.length === 0) {
					this.$alert('请选择代金券', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				let strr = '';
				for(let i = 0; i < this.selectArr.length; i++) {
					strr += this.selectArr[i].CASHVOLUMERECORDID + ',';
				}
				strr = strr.substring(0, strr.length - 1);
				//console.log(strr);
				setCookie('ticketID', strr, 1);
				setCookie('currentPage', this.page1, 1);
				setCookie('pageSize', this.pageSize1, 1);
				this.$router.push({
					path: '/functions/sendCoupon'
				});
			},
			//分发记录
			goSendRecord() {
				this.$router.push({
					path: '/functions/sendRecord'
				});
			},
			//查询
			goQuery() {
				this.getList();
			},
			//重置
			resets() {
				this.value1 = this.value2 = this.input1 = '';
			},
			//编辑
			edits(id) {
				this.$router.push({
					path: '/functions/editCoupon/' + id
				});
			},
			//删除
			dels(id) {
				deleteCashVolumeRecord(id).then(res => {
					if(res.data.STATUS_CODE === 1) {
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						for(let i = 0; i < this.actList.length; i++) {
							if(this.actList[i].CASHVOLUMERECORDID == id) {
								this.actList.splice(i, 1);
							}
						}
					}
				})
			},
		},
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.coupon {
		header {
			background: #fff;
			font-size: 22px;
			font-weight: 700;
			padding: 20px;
		}
		.contents {
			width: 97%;
			margin: 25px auto;
			padding: 25px;
			background: #fff;
			.conditions {
				span {
					white-space: nowrap;
				}
				.condition_1 {
					display: flex;
					.status {
						margin: 0 35px;
					}
				}
				.condition_2 {
					display: flex;
					margin: 20px;
					margin-left: 0;
					.keywords {
						display: flex;
						align-items: center;
						.el-input {
							width: 210px;
						}
					}
				}
				.selected {
					margin-top: 15px;
					border: 1px solid #f0f0f0;
					border-radius: 5px;
					background: #fafafa;
					p {
						display: flex;
						align-items: center;
						img {
							width: 20px;
							height: 20px;
							margin: 0 10px;
						}
						span {
							font-size: 16px;
							color: #717a7d;
							label {
								color: #e7251a;
							}
						}
					}
				}
				.tables {
					margin-top: 15px;
					.el-pagination {
						text-align: center;
						margin-top: 30px;
					}
					.editStatus, .edits, .dels {
						color: #1d93ff;
						cursor: pointer;
						margin: 0 2px;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
</style>